<template>
  <div>
    <h1>陈凤的分页</h1>
    <cf-table :goods="showgoods" @del-goods="delgoods(arguments)"></cf-table>
    <cf-pager :total="getTotalPage" :showpage="showpage" @change-page="changePage"></cf-pager>
  </div>
</template>

<script>
import CFTable from '../components/CFTable'
import CFPager from '../components/CFPager'
import axios from 'axios'
import * as CFPATH from '../api/cfapi' 

export default {
  name: 'CF',
  components:{
    'cf-table': CFTable,
    'cf-pager': CFPager
  },
  data(){
    return {
      allGoods: [],
      showgoods: [],
      showpage:1
    }
  },
  created(){
    axios({
      method: 'get',
      url: CFPATH.GETDATA
    }).then(res =>{
      this.allGoods = res.data.dataDetail
      this.showgoods = this.getPageData(this.allGoods)
    }).catch(err =>{
      console.log(err, '')
    })
  },
  methods: {
    /* 删除数据 */
    delgoods() {
      /* 数组的解构赋值 */
      let [no ,index] = arguments[0]
      axios({
        method:'post',
        url:CFPATH.DELONE,
        data: {
          id:no
        }
      }).then(res =>{
        console.log(res, '')
        if(res.status) {
          /* 删除数据, */
          /* 不是最后一页 还要添加一条数据 */
          /* 总的数据和显示的数据(index)有什么关系?
            在所有数据的数组里面的下标= (页数-1)*5+在显示数组里的下标
           */
          this.showgoods.splice(index,1)
          console.log(this.showgoods)
          this.allGoods.splice((this.showpage-1)*5+index,1)
          // console.log(this.showpage===this.getTotalPage, '最后一页')
          if(this.showpage !== this.getTotalPage) {
            this.showgoods.push(this.allGoods[(this.showpage-1)*5+index])
            console.log(this.showgoods)
          }
          console.log('删除最后一条数据',this.showgoods[0]===undefined,(this.showpage-1)===this.getTotalPage)
          if(this.showgoods[0]===undefined&&(this.showpage-1)===this.getTotalPage) {
            this.showpage=this.getTotalPage
            this.showgoods = this.getPageData(this.allGoods)
          }
          
          /* 添加节点 */
        }
      }).catch(err =>{
        console.log(err, '')
      })
    },
    /* 切换页面 */
    changePage(param){
      console.log(typeof param)
      let isNum = typeof param === 'number' ? true:false
      console.log('传过来的是页数嘛?', isNum)
      if(isNum) {
        this.showpage = param
        this.showgoods = this.getPageData(this.allGoods)
        return
      }
      //传进来的是字符串
      let opShowPage = param === 'prev' ? -1:1
      console.log(opShowPage)
      if((opShowPage+this.showpage) >0&&(opShowPage+this.showpage) <= this.totalPage) {
        /* 满足条件 */
        this.showpage = opShowPage+this.showpage
        this.showgoods = this.getPageData(this.allGoods)
      } else {

      }
    },
    /* 获取展示的数据 */
    getPageData(data=[]) {
      console.log('处理前:', data)
      let len = data.length
      let start = (this.showpage - 1) * 5
      let end = this.showpage * 5 -1
      console.log('当前页',this.showpage)
      end = end>len?len:end
      let newdata = data.slice(start,end+1)
      return newdata
    },
    
  },
  computed:{
    getTotalPage() {
      return Math.ceil(this.allGoods.length/5)
    },
  }
  
}
/* 
总结: 删除的思路
一般删除:不是最后一页的数据
1点击删除--2删除该元素--3删除this.allgoods/this.showgoods里面的该项数据--4向this.showgoods里面补充一条数据(push(this.allgoods被删除的小标对应的一项))

删除最后一条数据不适用(因为没有可补充的数据)
如果是删除最后一页的数据(不是最后一条) 执行上面的123步

删除最后一页的最后一条数据
1-2-3 4跳转显示页(删除之后的最后一页(即当前页的上一页))5补充this.showgoods(把删除之后的最后一页的5调数据装到this.showgoods里面)
*/
</script>
